<template>
  <div class="calculator" v-drag.y="show">
    <button @click.stop="changeModeEvent" class="toggle-button">
      <p v-if="changeMode">使用科学计算器 &nbsp; &nbsp; &#9864;</p>
      <p v-else>使用普通计算器 &nbsp; &nbsp; &#9862;</p>
    </button>
    <button @click="close" style="margin-top:-20px;float:right;font-size:30px;color:white;background-color: hsl(0, 0%, 20%);border: none; cursor: pointer; outline: none;text-shadow: -1px -1px 0 rgba(0, 0, 0, .35);">×</button>
<!--    <i class="layui-icon layui-icon-close" style="font-size: 25px;color: rgb(30, 159, 255);right: 30px;position: absolute;top: 65px;" @click.stop="close"></i>-->
    <div class="results">
      <input class="input" v-model="current" />
    </div>
    <div class="mode" v-if="changeMode">
      <button class="button" @click.stop="press">7</button>
      <button class="button" @click.stop="press">8</button>
      <button class="button" @click.stop="press">9</button>
      <button class="button" @click.stop="press">*</button>
      <button class="button" @click.stop="press">&#60;=</button>
      <button class="button" @click.stop="press">C</button>
      <button class="button" @click.stop="press">4</button>
      <button class="button" @click.stop="press($event)">5</button>
      <button class="button" @click.stop="press">6</button>
      <button class="button" @click.stop="press">/</button>
      <button class="button" @click.stop="press">(</button>
      <button class="button" @click.stop="press">)</button>
      <button class="button" @click.stop="press">1</button>
      <button class="button" @click.stop="press">2</button>
      <button class="button" @click.stop="press">3</button>
      <button class="button" @click.stop="press">-</button>
      <button class="button" @click.stop="press">x ²</button>
      <button class="button" @click.stop="press">±</button>
      <button class="button" @click.stop="press">0</button>
      <button class="button" @click.stop="press">.</button>
      <button class="button" @click.stop="press">%</button>
      <button class="button" @click.stop="press">+</button>
      <button class="button equal-sign" @click.stop="press">=</button>  
    </div>
    <div class="mode" v-else>
      <button class="button" @click.stop="press">sin</button>
      <button class="button" @click.stop="press">cos</button>
      <button class="button" @click.stop="press">tan</button>
      <button class="button" @click.stop="press">x^</button>
      <button class="button" @click.stop="press">&#60;=</button>
      <button class="button" @click.stop="press">C</button>
      <button class="button" @click.stop="press">log</button>
      <button class="button" @click.stop="press">ln</button>
      <button class="button" @click.stop="press">e</button>
      <button class="button" @click.stop="press">∘</button>
      <button class="button" @click.stop="press">rad</button>
      <button class="button" @click.stop="press">√</button>
      <button class="button" @click.stop="press">7</button>
      <button class="button" @click.stop="press">8   </button>
      <button class="button" @click.stop="press">9</button>
      <button class="button" @click.stop="press">/</button>
      <button class="button" @click.stop="press">x ²</button>
      <button class="button" @click.stop="press">x !</button>
      <button class="button" @click.stop="press">4</button>
      <button class="button" @click.stop="press">5</button>
      <button class="button" @click.stop="press">6</button>
      <button class="button" @click.stop="press">*</button>
      <button class="button" @click.stop="press">(</button>
      <button class="button" @click.stop="press">)</button>
      <button class="button" @click.stop="press">1</button>
      <button class="button" @click.stop="press">2</button>
      <button class="button" @click.stop="press">3</button>
      <button class="button" @click.stop="press">-</button>
      <button class="button" @click.stop="press">%</button>
      <button class="button" @click.stop="press">±</button>
      <button class="button" @click.stop="press">0</button>
      <button class="button" @click.stop="press">.</button>
      <button class="button" @click.stop="press">&#x003C0;</button>
      <button class="button" @click.stop="press">+</button>                    
      <button class="button equal-sign" @click.stop="press">=</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Calculator',
  data () {
    return{ 
      current: '',
      changeMode: true,
      show:true
    }
  },
  methods: {
    close(){
      this.$emit('close')
    },
    press: function (event) {
      let me = this
      let key = event.target.textContent

      if (
        key != '=' && 
        key != 'C' &&
        key != '*' &&
        key != '/' &&
        key != '√' &&
        key != "x ²" &&
        key != "%" &&
        key != "<=" && 
        key != "±" && 
        key != "sin" && 
        key != "cos" && 
        key != "tan" && 
        key != "log" && 
        key != "ln" && 
        key != "x^" && 
        key != "x !" && 
        key != "π" && 
        key != "e" && 
        key != "rad" && 
        key != "∘"
      ) {
        me.current += key
        
      } else if (key === '=') {
        
        if ((me.current).indexOf('^') > -1) {
          let base = (me.current).slice(0, (me.current).indexOf('^'))
          let exponent = (me.current).slice((me.current).indexOf('^') + 1)
          me.current = eval('Math.pow(' + base + ',' + exponent + ')')
        } else {
          me.current = eval(me.current)
        }
      
      } else if (key === 'C') {
        
        me.current = ''

      } else if (key === '*') {
        
        me.current += '*'

      } else if (key === '/') {
        
        me.current += '/'

      } else if (key === '+') {
        
        me.current += '+'

      } else if (key === '-') {
        
        me.current += '-'

      } else if (key === '±') {
        
        if ((me.current).charAt(0) === '-') {
          me.current = (me.current).slice(1)
        } else {
          me.current = '-' + me.current
        }

      } else if (key === '<=') {
        
        me.current = me.current.substring(0, me.current.length - 1)

      } else if (key === '%') {
        
        me.current = me.current / 100

      } else if (key === 'π') {
        
        me.current = me.current * Math.PI

      } else if (key === 'x ²') {
        
        me.current = eval(me.current * me.current)

      } else if (key === '√') {
        
        me.current = Math.sqrt(me.current)

      } else if (key === 'sin') {
        
        me.current = Math.sin(me.current)

      } else if (key === 'cos') {
        
        me.current = Math.cos(me.current)

      } else if (key === 'tan') {
        
        me.current = Math.tan(me.current)

      } else if (key === 'log') {
        
        me.current = Math.log10(me.current)

      } else if (key === 'ln') {
        
        me.current = Math.log(me.current)

      } else if (key === 'x^') {
        
        me.current += '^'

      } else if (key === 'x !') {

        let number = 1
        if (me.current === 0) {
          me.current = '1'
        } else if (me.current < 0) {
          me.current = NaN
        } else {
          let number = 1
          for (let i = me.current; i > 0; i--) {
            number *= i
          }
          me.current = number
        }

      } else if (key === 'e') {
        
        me.current = Math.exp(me.current)

      } else if (key === 'rad') {
        
        me.current = me.current * (Math.PI / 180)

      } else if (key === '∘') {

        me.current = me.current * (180 / Math.PI)

      }
    },
    changeModeEvent: function() {
      let me = this
      me.changeMode = !me.changeMode
    }
  },
  /*实现拖拽*/
  directives:{
    drag(el,{value,modifiers}){
      //el代表使用该指令的元素
      el.onmousedown = function(e){
        if(e.target.className!="calculator"){
          return
        }
        var disx = e.offsetX ;
        var disy = e.offsetY;
        //阻止浏览器的默认事件
        e.preventDefault();
        document.onmousemove = function(e){
          var x = e.clientX - disx;
          var y = e.clientY - disy;
          //如果表达式的结果是false,就不拖拽
          if(!value){
            return;
          }
          //修饰符
          if(modifiers.x){
            el.style.left = x + "px";
          }
          //修饰符
          if(modifiers.y){
            el.style.top = y + "px";
          }
          if(!(modifiers.x && !modifiers.y) && value){
            el.style.left = x + "px";
            el.style.top = y + "px";
          }
        }
        document.onmouseup = function(){
          document.onmousemove = null;
          document.onmouseup = null;
        }
      }
    }

  }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .calculator {
    width: 460px;
    padding: 20px;
    border-radius: 5px;
    font-size: 16px;
    background-color: hsl(0, 0%, 20%);
    position: fixed;
    z-index:1;
    cursor: move
  }

  .input {
    width: 420px;   
    height: 50px;
    border-radius: 0px;
    border: 1px solid hsl(0, 0%, 0%);
    background-color: #333333;
    color: #d9d9d9;
    padding: 0 5px 0 5px;
    margin: 0 0px 10px 0px;
    font-size: 30px;
  }

  .input:focus,
  .input:active {
    border-color: #03a9f4;
    box-shadow: 0 0 4px #03A9F4;
    outline: none 0;
  }

  .button {
    margin: 3px;
    width: 63px;
    border: 1px solid hsl(0, 0%, 5%);
    height: 30px;
    border-radius: 4px;
    color: hsl(0, 0%, 85%);
    background-color: hsl(0, 0%, 10%);
    cursor: pointer;
    outline: none;
  }

  .mode {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
  }

  .equal-sign {
    background-color: hsl(120, 100%, 25%);
    width: 133px;
  }

  .toggle-button {
    border: none;
    background-color: hsl(0, 0%, 20%);
    cursor: pointer;
    outline: none;
    font-size: 1rem;
    color: #fff;
    text-shadow: -1px -1px 0 rgba(0, 0, 0, .35)
  }

  p {
    margin-top: 0;
  }

  button::-moz-focus-inner {
    border-color: transparent;
  }
</style>
